<template>
  <div class="inspectiontesting">
    <SubtTitle
      name="手术信息"
      icon-name="operate"
      has-icon
      style="margin-bottom: 10px"
    ></SubtTitle>
    <div class="main">
      <!-- 手术列表 -->
      <div class="main_left">
        <el-scrollbar>
          <div
            class="patient"
            :class="{ patient_active: activeId === index }"
            @click="onPatient(index)"
            v-for="(item, index) in patienList"
            :key="index"
          >
            <div class="patient_top">
              <div class="name">{{ item.name }}</div>
              <div class="sex">{{ item.sex }}</div>
              <div class="age">{{ item.age }}</div>
              <div class="rank">{{ item.rank }}</div>
            </div>
            <div class="patient_bottom">
              <el-tooltip
                class="box-item"
                effect="dark"
                :content="item.diagnose"
                placement="top-start"
              >
                <div class="diagnose">
                  {{ item.diagnose }}
                </div>
              </el-tooltip>

              <div class="title">{{ item.title }}</div>
            </div>
          </div>
        </el-scrollbar>
      </div>
      <div class="main_right">
        <div class="details">
          <div class="details_left">
            <div class="via"><img src="" alt="" /></div>
            <div class="details_left_patmsg">
              <div class="patmsg_top">
                <div class="name">钱乐惜</div>
                <div class="sex">男</div>
                <div class="age">66</div>
                <div class="ward">8病区</div>
                <div class="bednumber">54床</div>
                <div class="recordnumber">9825231</div>
                <div class="rank">Ⅱ级</div>
              </div>
              <div class="patmsg_bottom">
                <div class="diagnosis">
                  <div class="title">诊断：</div>
                  <div class="content">静脉曲张</div>
                </div>
                <div class="operationname">
                  <div class="title">手术名称：</div>
                  <div class="content">输精管道梗阻</div>
                </div>
                <div class="anesthesiaWay">
                  <div class="title">麻醉方式：</div>
                  <div class="content">全麻</div>
                </div>
              </div>
            </div>
          </div>
          <div class="details_right">
            <div class="anesthetist">
              <div class="title">麻醉医生：</div>
              <div class="content">马凯</div>
            </div>
            <div class="anesthetist">
              <div class="title">手术护士：</div>
              <div class="content">何天天</div>
            </div>
            <div class="anesthetist">
              <div class="title">洗手护士：</div>
              <div class="content">周敏</div>
            </div>
            <div class="anesthetist">
              <div class="title">巡回护士：</div>
              <div class="content">谢娜</div>
            </div>
          </div>
        </div>
        <el-divider border-style="dashed" />
        <div class="step">
          <div class="number">601</div>
          <StepBar :stepData="stepData"></StepBar>
        </div>

        <div class="tabs">
          <div
            v-for="(item, index) in tabsList"
            :key="index"
            @click="selectTab(index)"
            :class="{ title_active: activeTab === index }"
          >
            <svg-icon
              :name="item.iconName"
              style="width: 16px; height: 16px; margin-right: 3px"
            />
            <span>
              {{ item.name }}
            </span>
          </div>
        </div>
        <el-divider border-style="dashed" />
        <div class="content">
          <div v-if="activeTab === 0">
            <InspectionCom
              :list="inspectionTestingList"
              :columnList="columnList"
              :tableData="tableData"
            ></InspectionCom>
          </div>
          <div v-if="activeTab === 1">
            <CheckCom :list="chaeckComList"></CheckCom>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, toRefs, onBeforeMount, onMounted } from "vue";
import StepBar from "@/components/StepBar/StepBar.vue";
import SubtTitle from "@/components/Title/subtTitle.vue";
import svgIcon from "@/components/Svg/svg-icon.vue";
import InspectionCom from "@/views/InspectionTesting/components/InspectionCom.vue";
import CheckCom from "@/views/InspectionTesting/components/checkCom.vue";
const stepData = ref([
{ title: "进入手术室", time: "15:00" },
  { title: "麻醉", time: "15:10" },
  { title: "手术", time: "15:20" },
  { title: "手术", time: "15:40" },
  { title: "手术", time: "16:50" },
  { title: "手术", time: "16:55" },
  { title: "手术", time: "17:00" },
  { title: "手术", time: "" },
]);

// 手术信息列表
import { ref } from 'vue';

const patienList = ref([
  {
    id: "1",
    name: "张三",
    sex: "1",
    age: "66",
    rank: "Ⅱ级",
    diagnose: "多发性羧化脢缺乏症",
    office: "肿瘤科",
    attendingPhysician: "汪伟",
  },
  {
    id: "2",
    name: "李四",
    sex: "1",
    age: "72",
    rank: "Ⅰ级",
    diagnose: "高血压病",
    office: "心血管内科",
    attendingPhysician: "刘医生",
  },
  {
    id: "3",
    name: "王伟",
    sex: "1",
    age: "58",
    rank: "Ⅲ级",
    diagnose: "糖尿病",
    office: "内分泌科",
    attendingPhysician: "张医生",
  },
  {
    id: "4",
    name: "赵丽",
    sex: "0",
    age: "48",
    rank: "Ⅱ级",
    diagnose: "慢性支气管炎",
    office: "呼吸科",
    attendingPhysician: "王医生",
  },
  {
    id: "5",
    name: "钱婷",
    sex: "0",
    age: "60",
    rank: "Ⅳ级",
    diagnose: "肝硬化",
    office: "消化科",
    attendingPhysician: "李主任",
  },
  {
    id: "6",
    name: "孙杰",
    sex: "1",
    age: "55",
    rank: "Ⅰ级",
    diagnose: "冠心病",
    office: "心血管内科",
    attendingPhysician: "林医生",
  },
  {
    id: "7",
    name: "周燕",
    sex: "0",
    age: "70",
    rank: "Ⅱ级",
    diagnose: "脑卒中",
    office: "神经内科",
    attendingPhysician: "杨医生",
  },
  {
    id: "8",
    name: "吴刚",
    sex: "1",
    age: "65",
    rank: "Ⅱ级",
    diagnose: "腰椎间盘突出",
    office: "骨科",
    attendingPhysician: "陈主任",
  },
  {
    id: "9",
    name: "郑爽",
    sex: "0",
    age: "53",
    rank: "Ⅲ级",
    diagnose: "乳腺癌",
    office: "肿瘤科",
    attendingPhysician: "黄医生",
  },
  {
    id: "10",
    name: "冯明",
    sex: "1",
    age: "63",
    rank: "Ⅳ级",
    diagnose: "慢性肾衰竭",
    office: "肾内科",
    attendingPhysician: "刘主任",
  },
  {
    id: "11",
    name: "陈莉",
    sex: "0",
    age: "58",
    rank: "Ⅱ级",
    diagnose: "胃癌",
    office: "消化科",
    attendingPhysician: "王医生",
  },
  {
    id: "12",
    name: "刘晨",
    sex: "1",
    age: "50",
    rank: "Ⅰ级",
    diagnose: "糖尿病",
    office: "内分泌科",
    attendingPhysician: "张主任",
  },
  {
    id: "13",
    name: "林雪",
    sex: "0",
    age: "68",
    rank: "Ⅱ级",
    diagnose: "高血糖",
    office: "内分泌科",
    attendingPhysician: "高医生",
  },
  {
    id: "14",
    name: "高鹏",
    sex: "1",
    age: "45",
    rank: "Ⅳ级",
    diagnose: "肺癌",
    office: "肿瘤科",
    attendingPhysician: "吴医生",
  },
  {
    id: "15",
    name: "马敏",
    sex: "0",
    age: "62",
    rank: "Ⅱ级",
    diagnose: "骨关节炎",
    office: "骨科",
    attendingPhysician: "陈医生",
  },
  {
    id: "16",
    name: "邓超",
    sex: "1",
    age: "49",
    rank: "Ⅰ级",
    diagnose: "高血压",
    office: "心血管内科",
    attendingPhysician: "孙医生",
  },
  {
    id: "17",
    name: "蔡静",
    sex: "0",
    age: "55",
    rank: "Ⅲ级",
    diagnose: "白血病",
    office: "血液科",
    attendingPhysician: "冯医生",
  },
  {
    id: "18",
    name: "潘晓",
    sex: "1",
    age: "59",
    rank: "Ⅱ级",
    diagnose: "慢性支气管炎",
    office: "呼吸科",
    attendingPhysician: "李主任",
  },
  {
    id: "19",
    name: "段萍",
    sex: "0",
    age: "61",
    rank: "Ⅳ级",
    diagnose: "乳腺癌",
    office: "肿瘤科",
    attendingPhysician: "周医生",
  },
  {
    id: "20",
    name: "陈涛",
    sex: "1",
    age: "53",
    rank: "Ⅱ级",
    diagnose: "前列腺癌",
    office: "泌尿外科",
    attendingPhysician: "赵医生",
  },
  {
    id: "21",
    name: "李佳",
    sex: "0",
    age: "48",
    rank: "Ⅰ级",
    diagnose: "抑郁症",
    office: "心理科",
    attendingPhysician: "杨医生",
  },
  {
    id: "22",
    name: "蒋林",
    sex: "1",
    age: "61",
    rank: "Ⅱ级",
    diagnose: "心脏瓣膜病",
    office: "心血管外科",
    attendingPhysician: "冯医生",
  },
]);


const activeId = ref(null);

const onPatient = (index) => {
  activeId.value = index;
};

// 检验检查报告
const tabsList = ref([
  { name: "检查报告", iconName: "Inspection" },
  { name: "检验报告", iconName: "check" },
]);
const activeTab = ref(0); // 默认选中的 Tab
const selectTab = (index) => {
  activeTab.value = index;
};
const inspectionTestingList = ref([
  { title: "其它", time: "06-23 11:58" },
  { title: "血液检验", time: "06-23 11:58" },
  { title: "血液检验", time: "06-23 11:58" },
  { title: "血液检验", time: "06-23 11:58" },
  { title: "血液检验", time: "06-23 11:58" },
  { title: "血液检验", time: "06-23 11:58" },
  { title: "血液检验", time: "06-23 11:58" },
  { title: "血液检验", time: "06-23 11:58" },
  { title: "血液检验", time: "06-23 11:58" },
  { title: "血液检验", time: "06-23 11:58" },
]);

const chaeckComList = ref([
  { title: "心电图", time: "06-23 11:58" },
  { title: "B超", time: "06-23 11:58" },
  { title: "CT检查", time: "06-23 11:58" },
]);

// const InspectionTestingList = ()=>{

// }

const tableData = ref([
  {
    inspectionItem: "白细胞",
    result: "10",
    referenceRange: "20-25",
    unit: "ml",
  },
  {
    inspectionItem: "白细胞",
    result: "10",
    referenceRange: "20-25",
    unit: "ml",
  },
  {
    inspectionItem: "白细胞",
    result: "10",
    referenceRange: "20-25",
    unit: "ml",
  },
  {
    inspectionItem: "白细胞",
    result: "10",
    referenceRange: "20-25",
    unit: "ml",
  },
  {
    inspectionItem: "白细胞",
    result: "10",
    referenceRange: "20-25",
    unit: "ml",
  },
  {
    inspectionItem: "白细胞",
    result: "10",
    referenceRange: "20-25",
    unit: "ml",
  },
  {
    inspectionItem: "白细胞",
    result: "10",
    referenceRange: "20-25",
    unit: "ml",
  },
  {
    inspectionItem: "白细胞",
    result: "10",
    referenceRange: "20-25",
    unit: "ml",
  },
  {
    inspectionItem: "白细胞",
    result: "10",
    referenceRange: "20-25",
    unit: "ml",
  },
  {
    inspectionItem: "白细胞",
    result: "10",
    referenceRange: "20-25",
    unit: "ml",
  },
  {
    inspectionItem: "白细胞",
    result: "10",
    referenceRange: "20-25",
    unit: "ml",
  },
  {
    inspectionItem: "白细胞",
    result: "10",
    referenceRange: "20-25",
    unit: "ml",
  },
  {
    inspectionItem: "白细胞",
    result: "10",
    referenceRange: "20-25",
    unit: "ml",
  },
  {
    inspectionItem: "白细胞",
    result: "10",
    referenceRange: "20-25",
    unit: "ml",
  },
]);

const columnList = ref([
  { prop: "inspectionItem", label: "检验项目" },
  { prop: "result", label: "结果" },
  { prop: "referenceRange", label: "参考范围" },
  { prop: "unit", label: "单位" },
]);
</script>
<style scoped lang="scss">
.inspectiontesting {
  height: 100%;
  background: #282929;
  border-radius: 20px;
  padding: 24px;
  .main {
    height: calc(100vh - 200px);
    display: flex;
    overflow: hidden;
    .main_left {
      width: 12%;
      .patient {
        color: rgba(255, 255, 255, 0.55);
        border-radius: 12px 0px 0px 12px;
        cursor: pointer;
        font-style: normal;
        font-weight: 700;
        padding: 22px 27px 22px 27px;
        align-items: flex-start;
        align-content: flex-start;
        gap: 7px;
        align-self: stretch;
        flex-wrap: wrap;
        margin-bottom: 16px;
        font-size: 16px;
        line-height: 32px; /* 133.333% */
        .patient_top {
          display: flex;
          justify-content: space-between;
          .name {
            font-size: 24px;
          }
          .name_active {
          }
        }
        .patient_bottom {
          display: flex;
          justify-content: space-between;
          .diagnose {
            width: 100px;
            overflow: hidden;
            font-size: 16px;
            white-space: nowrap;
            text-overflow: ellipsis; /* 显示省略号 */
          }
          .title {
            color: var(---LAN3-Disabled, #a9f2eb);
            text-align: center;
            /* Mark/Small */
            font-size: 12px;
            font-style: normal;
            font-weight: 700;
            border-radius: 9px;
            background: linear-gradient(
              94deg,
              rgba(0, 255, 194, 0.37) 5.31%,
              rgba(61, 113, 113, 0.33) 96.03%
            );
            height: 24px;
            justify-content: center;
            line-height: 24px;
            align-items: center;
            padding: 0 5px;
            margin-top: 3px;
          }
        }
      }

      .patient_active {
        color:#fff;
        border-radius: 12px 0px 0px 12px;

        cursor: pointer;
        font-style: normal;
        font-weight: 700;
        padding: 22px 27px 22px 27px;
        align-items: flex-start;
        align-content: flex-start;
        gap: 7px;
        align-self: stretch;
        flex-wrap: wrap;
        margin-bottom: 16px;
        font-size: 16px;
        line-height: 32px; /* 133.333% */
        background: radial-gradient(
            68.36% 69.42% at 1.35% 5.14%,
            rgba(0, 255, 240, 0.49) 0%,
            rgba(0, 255, 240, 0) 100%
          ),
          radial-gradient(
            90.82% 51.47% at 0% 50%,
            rgba(86, 255, 214, 0.17) 0%, 
            rgba(20, 20, 20, 0.36) 100%
          );
      }
    }
    .main_right {
      flex: 1;
      background: #222222;
      padding-right: 20px;
      .step {
        display: flex;
        align-items: center;
        .number {
          color: #fff;
          /* Headline/Large */
          font-family: "Microsoft YaHei";
          font-size: 36px;
          font-style: normal;
          font-weight: 700;
          line-height: 44px; /* 122.222% */
          width: 100px;
          text-align: center;
        }
      }
    }
    .details {
      padding: 15px;
      display: flex;
      justify-content: space-between;
      .details_left {
        display: flex;
        align-items: center;
        .via {
          width: 67px;
          height: 67px;
          flex-shrink: 0;
          border-radius: 300px;
          background: url("@/assets/bg.png") lightgray 50% / cover no-repeat;
        }
        .details_left_patmsg {
          margin-left: 15px;
          .patmsg_top {
            display: flex;
            .name,
            .sex,
            .age,
            .ward,
            .bednumber,
            .recordnumber,
            .rank {
              color: #fff;
              font-size: 16px;
              font-weight: 700;
              line-height: 24px; /* 150% */
              margin-right: 30px;
            }
          }
          .patmsg_bottom {
            display: flex;
            .operationname,
            .anesthesiaWay,
            .diagnosis {
              display: flex;
              align-items: center;
              margin-right: 30px;
              .title {
                color: var(--Gray-Gray5, #c5c5c5);

                font-size: 12px;
                font-weight: 400;
                line-height: 20px; /* 166.667% */
              }
              .content {
                color: #fff;

                font-size: 16px;
                font-weight: 700;
                line-height: 24px; /* 150% */
              }
            }
          }
        }
      }
      .details_right {
        display: flex;
        align-items: center;
        .anesthetist {
          display: flex;
          margin-right: 30px;

          .title {
            color: var(--Gray-Gray5, #c5c5c5);

            font-size: 12px;
            font-weight: 400;
            line-height: 20px; /* 166.667% */
          }
          .content {
            color: #fff;

            font-size: 16px;
            font-weight: 700;
            line-height: 24px; /* 150% */
          }
        }
      }
    }
    .tabs {
      display: flex;
      margin-top: 50px;
      div {
        font-family: "Source Han Sans CN";
        font-size: 14px;
        font-style: normal;
        font-weight: 700;
        color: #a6a6a6;
        line-height: normal;
        display: flex;
        align-items: center;
        margin: 0 10px;
        .svg-icon {
          fill: #a6a6a6;
        }
      }
      .title_active {
        color: #46ffd3;
        font-family: "Source Han Sans CN";
        font-size: 14px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        .svg-icon {
          fill: #46ffd3;
        }
      }
    }
  }
}
</style>
